<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户管理</title>
    <link rel="stylesheet" href="./adminLTE/css/adminlte.min.css" />
    <link rel="stylesheet" href="./adminLTE/css/app.css" />
  </head>

  <body>
    <div id="app">
      <div class="wrapper">
        <!-- 顶部导航 -->
        <nav class="app-header">
          <button type="button" class="btn btn-danger btn-sm">退出登陆</button>
        </nav>

        <!-- 内容容器 -->
        <div class="content-header">
          <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0">用户管理</h1>
              </div>
            </div>
          </div>
        </div>

        <!-- 内容区域 -->
        <div class="content">
          <div class="container-fluid">
            <div class="card">
              <div class="card-header">
                <button type="button" class="btn btn-primary">添加用户</button>
              </div>
              <!-- /.card-header -->
              <div class="card-body" id="adminTable">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th style="width: 70px">序号</th>
                      <th>用户名</th>
                      <th>头像</th>
                      <th>注册时间</th>
                      <th>最后登陆时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>admin</td>
                      <td>
                        <img
                          width="30"
                          src="https://joeschmoe.io/api/v1/random"
                          alt=""
                        />
                      </td>
                      <td>2022-06-06</td>
                      <td>2022-06-06</td>
                      <td>
                        <button type="button" class="btn btn-info btn-sm">
                          修改
                        </button>
                        <button type="button" class="btn btn-danger btn-sm">
                          删除
                        </button>
                      </td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>admin</td>
                      <td>
                        <img
                          width="30"
                          src="https://joeschmoe.io/api/v1/random?id=2"
                          alt=""
                        />
                      </td>
                      <td>2022-06-06</td>
                      <td>2022-06-06</td>
                      <td>
                        <button type="button" class="btn btn-info btn-sm">
                          修改
                        </button>
                        <button type="button" class="btn btn-danger btn-sm">
                          删除
                        </button>
                      </td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>admin</td>
                      <td>
                        <img
                          width="30"
                          src="https://joeschmoe.io/api/v1/random?id=3"
                          alt=""
                        />
                      </td>
                      <td>2022-06-06 20:20:20</td>
                      <td>2022-06-06 20:20:20</td>
                      <td>
                        <button type="button" class="btn btn-info btn-sm">
                          修改
                        </button>
                        <button type="button" class="btn btn-danger btn-sm">
                          删除
                        </button>
                      </td>
                    </tr>

                  </tbody>
                </table>

                <!-- 分页结构 -->
                <div class="page">
                  <ul class="pagination">
                    <li class="paginate_button page-item disabled">
                      <a href="#" class="page-link">上一页</a>
                    </li>
                    <li class="paginate_button page-item active">
                      <a href="#" class="page-link">1</a>
                    </li>
                    <li class="paginate_button page-item">
                      <a href="#" class="page-link">2</a>
                    </li>
                    <li class="paginate_button page-item">
                      <a href="#" class="page-link">3</a>
                    </li>
                    <li class="paginate_button page-item">
                      <a href="#" class="page-link">4</a>
                    </li>
                    <li class="paginate_button page-item">
                      <a class="page-link">5</a>
                    </li>
                    <li class="paginate_button page-item">
                      <a class="page-link">6</a>
                    </li>
                    <li class="paginate_button page-item next">
                      <a class="page-link">下一页</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
